import styled from "styled-components";
import PaihangbangBoxBg from '../../../../../assets/images/bg_detail.bb32b2d1.jpg'
import PaihangbangItemBg from '../../../../../assets/images/home_paihangbang.jpg'

export const PaihangbangBox = styled.div`
  height: 695px;
  background: url(${PaihangbangBoxBg}) center/200% repeat-x;
  .title{
    position: relative;
    height: 114px;
    font-size: 24px;
    line-height: 114px;
    text-align: center;
    h2{
      letter-spacing: 20px;
    }
    .jiaobiao{
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    a{
      color: #000000;
      font-size: 14px;
      &:hover{
        color: #31c27c;
      }
    }
  }
  .main{
    display: flex;
    justify-content: space-between;
    height: 500px;

    .main_item{
      position: relative;
      width: 224px;
      height: 500px;
      overflow: hidden;
      z-index: 1;
      /* 当鼠标放到这个盒子上的时候 */
      &:hover .main_item_bg{
         transform: scale(1.1);
      }
      .main_item_bg{
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 224px;
        height: 500px;
        background: url(${PaihangbangItemBg}) no-repeat;
        transition: all .4s;
      }
      /* 给每一个盒子增加背景 */
      .main_item_2{
        background-position: -224px 0;
      }
      .main_item_3{
        background-position: -448px 0;
      }
      .main_item_4{
        background-position: -672px 0;
      }
      .main_item_5{
        background-position: -896px 0;
      }
      /* 巅峰榜 */
      .main_item_dianfengbang{
        margin-top: 30px;
        color: #fefbfc;
        font-size: 20px;
        letter-spacing: 5px;
        text-align: center;
        opacity: .7;
      }
      h3{
        text-align: center;
        color: #ffffff;
        font-size: 26px;
      }
      .main_item_hengxian{
        text-align: center;
        font-size: 50px;
        color: #ffffff;
      }
      ul {
        padding-left: 30px;
      }
      ul li{

        font-size: 14px;
        height: 46px;
        margin-bottom: 20px;
        /* background-color: blue; */
        cursor: pointer;
        a{
          display: flex;
          color: #ffffff;
          width: 100%;
          height: 46px;
          &:hover >div span:nth-child(1){
          color: #3ac27c;
          font-weight: bold;
          /* font-size: 18px; */
        }
        >div span:nth-child(1){
          transition: all .4s;
        }
        >span{
          margin-right: 10px;
        }
        >div{
          display: flex;
          flex-direction: column;

        }
        }
        
      } 
     
    }


  }
`